<template>
  <div
    class="view"
    style="font-size: 10px; user-select: text !important; overflow: hidden"
  >
    <div @click="clickView()" style="cursor: pointer">
      <el-row class="one" style="margin-bottom: 15px" type="flex" justify="end">
        <el-col :span="24">
          <span
            class="one-title spanStyle"
            style="text-align: left"
            :title="viewDataSouse.alarmBody"
          >
            <span style="float: left">{{ viewDataSouse.alarmBody }}</span>
            <div
              style="margin-left: 10px; width: 24px; float: left"
              :style="{
                'text-align': 'center',
                display: viewDataSouse.ifTimeout === 0 ? 'none' : 'block',
              }"
            >
              <div class="one-chao">超</div>
            </div>
            <div
              style="margin-left: 10px; width: 24px; float: left"
              :style="{
                'text-align': 'center',
                display: viewDataSouse.leaderNum === 0 ? 'none' : 'block',
              }"
            >
              <div class="one-pi">批</div>
            </div>
          </span>
        </el-col>
        <!-- 订单状态图片 -->
        <img
          style="position: absolute; right: -21px; top: -25px"
          :src="viewDataSouse.orderStatusUrl"
        />
      </el-row>
      <el-row class="two">
        <el-col :span="10" style="position: relative">
          <el-image
            fit="cover"
            style="height: 95px; width: 100%"
            :src="
              viewDataSouse.imgUrl
                ? viewDataSouse.imgUrl.split(',')[0]
                : demoImg
            "
          >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <span class="stateType"
            >{{ "来自" + viewDataSouse.warningSourceName }}&nbsp;&nbsp;</span
          >
        </el-col>
        <el-col :offset="1" :span="13" id="r_view">
          <el-row class="row">
            <div class="viewTitleStyle">
              <el-tooltip
                placement="top"
                popper-class="repeated-event-tooltip"
                :open-delay="800"
              >
                <div slot="content" class="tooltip-content">事件编号</div>
                <i class="iconfont icon-bianma1" style="line-height: 20px"></i>
              </el-tooltip>
              <el-tooltip
                placement="top"
                popper-class="repeated-event-tooltip"
                :open-delay="800"
              >
                <div slot="content" class="tooltip-content">
                  {{ viewDataSouse.orderId }}
                </div>
                <div style="color: #4a90e2" class="value">
                  {{ viewDataSouse.orderId }}
                </div>
              </el-tooltip>
            </div>
          </el-row>
          <el-row class="row">
            <el-col :span="24">
              <div class="viewTitleStyle">
                <el-tooltip
                  placement="top"
                  popper-class="repeated-event-tooltip"
                  :open-delay="800"
                >
                  <div slot="content" class="tooltip-content">告警类型</div>
                  <i class="iconfont icon-fenlei-leixing"></i>
                </el-tooltip>

                <div class="value">{{ viewDataSouse.warningTypeName }}</div>
                <div
                  class="status tag1"
                  v-if="viewDataSouse.importanceLevel === '1'"
                >
                  {{ viewDataSouse.importanceLevelName }}
                </div>
                <div
                  class="status tag2"
                  v-if="viewDataSouse.importanceLevel === '2'"
                >
                  {{ viewDataSouse.importanceLevelName }}
                </div>
                <!--                <div class="status">{{viewDataSouse.emergencyLevelName}}</div>-->
              </div>
            </el-col>
          </el-row>
          <el-row class="row">
            <div class="viewTitleStyle">
              <el-tooltip
                placement="top"
                popper-class="repeated-event-tooltip"
                :open-delay="800"
              >
                <div slot="content" class="tooltip-content">所属网格</div>
                <i class="iconfont icon-wangge"></i>
              </el-tooltip>
              <div class="value">{{ viewDataSouse.gridName }}</div>
            </div>
          </el-row>
          <el-row class="row">
            <div class="viewTitleStyle">
              <el-tooltip
                placement="top"
                popper-class="repeated-event-tooltip"
                :open-delay="800"
              >
                <div slot="content" class="tooltip-content">事发地点</div>
                <i class="iconfont icon-dizhi"></i>
              </el-tooltip>
              <el-tooltip
                placement="top"
                popper-class="repeated-event-tooltip"
                :open-delay="800"
              >
                <div slot="content" class="tooltip-content">
                  {{ viewDataSouse.address }}
                </div>
                <div class="value">{{ viewDataSouse.address }}</div>
              </el-tooltip>
            </div>
          </el-row>
          <!--          <el-row class="row">-->
          <!--            <div class="title">-->
          <!--              处理人:-->
          <!--              <div class="value">{{viewDataSouse.processName}}</div>-->
          <!--            </div>-->
          <!--          </el-row>-->
          <!-- <el-row class="row">
            <div class="viewTitleStyle">
              <el-tooltip
                placement="top"
                popper-class="repeated-event-tooltip"
                :open-delay="800"
              >
                <div slot="content" class="tooltip-content">处理时长</div>
                <i class="iconfont icon-daojishi1"></i>
              </el-tooltip>
              <div class="value">{{ viewDataSouse.duration }}</div>
            </div>
          </el-row> -->
        </el-col>
      </el-row>
      <el-row class="three">
        <el-row class="row">
          <div class="line2"></div>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <div class="viewTitleStyle" style="color: #000000">
              <el-tooltip
                placement="top"
                popper-class="repeated-event-tooltip"
                :open-delay="800"
              >
                <div slot="content" class="tooltip-content">告警时间</div>
                <i class="iconfont icon-shijian"></i>
              </el-tooltip>
              <div class="value">{{ timeStr(viewDataSouse.alarmTime) }}</div>
            </div>
          </el-col>
          <el-col :span="12" style="text-align: end">
            <div class="viewTitleStyle" style="color: #000000">
              <el-tooltip
                placement="top"
                popper-class="repeated-event-tooltip"
                :open-delay="800"
              >
                <div slot="content" class="tooltip-content">接收时间</div>
                <i class="iconfont icon-shizhong"></i>
              </el-tooltip>
              <div class="value">{{ timeStr(viewDataSouse.reciveTime) }}</div>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </div>
    <div class="view-footer">
      <div
        class="collect-btn"
        @click="delCollectStatus(viewDataSouse.orderId)"
        v-hasPermi="['event:myevent:collect']"
      >
        <i class="iconfont icon-yishoucang" style="color: #f7b500"></i>
        <span>收藏</span>
      </div>

      <div class="view-footer-right">
        <!-- <div
          class="timeout-desc"
          style="text-align: end; height: 28px; line-height: 28px"
        >
          <span
            :style="{
              color: viewDataSouse.ifTimeout === 1 ? '#FF6A6C' : '#4A90E2',
            }"
            >{{ viewDataSouse.showTime }}</span
          >
        </div> -->
        <!-- <el-button
          class="buttonClass el-button-Query"
          @click="queryInfo"
          v-show="
            this.viewDataSouse.orderStatus !== '0' &&
            this.viewDataSouse.orderStatus !== '6' &&
            this.viewDataSouse.orderStatus !== '7' &&
            authority()
          "
          :style="{
            cursor: viewDataSouse.ifEdit == '0' ? 'not-allowed' : 'pointer',
          }"
          ><span>{{ btnName }}</span>
        </el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import demoImg from "@/assets/image/demoImg.png";
import $ from "jquery";
import { DateFormat } from "@/utils/public";
import "@/assets/font/iconfont.css";
//待研判
import statusNeedJudged from "@/assets/image/status-need-judged.png";
//待认领
import statusNeedReceive from "@/assets/image/status-need-receive.png";
//待调度
import statusNeedDispatched from "@/assets/image/status-need-dispatched.png";
//待处置
import statusNeedDisposal from "@/assets/image/status-need-disposal.png";
//待核实
import statusNeedVerify from "@/assets/image/status-need-verify.png";
//已完结
import statusEnd from "@/assets/image/status-end.png";
import {
  getOrderList,
  grabProcessOrder,
  delWarningOrderCollection,
} from "@/api/modules/eventManagement/myFavorites/view";
import { getInfo } from "@/api/login";
export default {
  name: "eventView",
  data() {
    return {
      demoImg: demoImg,
      disabled: true,
      lineWidth: 345,
      btnName: "",
      power: [],
    };
  },
  created() {
    if (this.viewDataSouse.orderStatus === "1") {
      this.viewDataSouse.orderStatusUrl = statusNeedJudged;
    } else if (this.viewDataSouse.orderStatus === "2") {
      //待调度
      this.viewDataSouse.orderStatusUrl = statusNeedDispatched;
    } else if (this.viewDataSouse.orderStatus === "3") {
      //待认领
      this.viewDataSouse.orderStatusUrl = statusNeedReceive;
    } else if (this.viewDataSouse.orderStatus === "4") {
      //待处置
      this.viewDataSouse.orderStatusUrl = statusNeedDisposal;
    } else if (this.viewDataSouse.orderStatus === "5") {
      //待核实
      this.viewDataSouse.orderStatusUrl = statusNeedVerify;
    } else {
      //已完结 6工单完成  7重复告警完成 假警
      this.viewDataSouse.orderStatusUrl = statusEnd;
    }

    this.$nextTick(() => {
      // 停用选择
      document.onselectstart = new Function("event.returnValue=true");
    });
    // let info = $store.get("$loginInfo");
    // if (info.power && info.power["/event"]) {
    //   this.power = info.power["/event"];
    // }
    getInfo().then((res) => {
      this.power = res.permissions;
    });
  },
  mounted() {
    this.updateStatus();
  },
  methods: {
    delCollectStatus(warningOrderId) {
      const _this = this;
      // $v.post(
      //   this,
      //   urlEvent + "/alarm/order/collection/delWarningOrderCollection",
      //   {
      //     warningOrderId,
      //   },
      //   (res) => {
      //     if (res.resultStat === "SUCCESS") {
      //       $v.message({
      //         type: res.resultStat,
      //         mess: "取消收藏成功",
      //       });
      //       _this.$emit("getViewDataSource");
      //     } else {
      //       $v.message({
      //         type: res.resultStat,
      //         mess: res.mess,
      //         data: res.data,
      //       });
      //     }
      //   }
      // );
      delWarningOrderCollection({
        warningOrderId,
      }).then((res) => {
        if (res.code === 200) {
          // $v.message({
          //   type: res.resultStat,
          //   mess: "取消收藏成功",
          // });
          this.$message.success("取消收藏成功");
          this.$emit("getViewDataSource");
        } else {
          // $v.message({
          //   type: res.resultStat,
          //   mess: res.mess,
          //   data: res.data,
          // });
          this.$message.warning(res.mess);
        }
      });
    },
    autoHeight() {
      let height = $("#r_view").height() - 10;
      $(".leftpic").height(height);
    },
    open() {
      let _this = this;
      let item = this.$store.getters.userInfo;
      this.$confirm("是否认领此处理单？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            orderId: _this.viewDataSouse.orderId,
          };
          // $v.post(
          //   _this,
          //   urlEvent + "/alarm/processorder/grabProcessOrder",
          //   params,
          //   function (result) {
          //     if (result.resultStat === "SUCCESS") {
          //       _this.getDetails(_this.viewDataSouse.orderId);
          //       $v.message({
          //         type: "success",
          //         mess: "认领处理单成功！",
          //       });
          //     } else {
          //       $v.message({
          //         type: result.resultStat,
          //         mess: result.mess,
          //         data: result.data,
          //       });
          //     }
          //   }
          // );
          grabProcessOrder(params).then((res) => {
            if (res.code === 200) {
              this.getDetails(this.viewDataSouse.orderId);
              // $v.message({
              //   type: "success",
              //   mess: "认领处理单成功！",
              // });
              this.$message.success("认领处理单成功！");
            } else {
              // $v.message({
              //   type: result.resultStat,
              //   mess: result.mess,
              //   data: result.data,
              // });
              this.$message.warning(res.mess);
            }
          });
        })
        .catch(() => {
          // _this.$message({
          //   type: 'info',
          //   message: '取消认领'
          // });
        });
    },
    getDetails(id) {
      let _this = this;
      let params = {
        orderId: _this.viewDataSouse.orderId,
      };
      // $v.post(
      //   _this,
      //   urlEvent + "/alarm/order/getOrderList",
      //   params,
      //   function (result) {
      //     if (result.resultStat === "SUCCESS") {
      //       _this.viewDataSouse = result.data.list[0];
      //       _this.updateStatus();
      //     }
      //   }
      // );
      getOrderList(params).then((res) => {
        if (res.code === 200) {
          this.viewDataSouse = res.data.list[0];
          this.updateStatus();
        }
      });
      this.$emit("queryEventData", true);
    },
    // authority() {
    //   let isshow = false;
    //   if (this.power) {
    //     switch (this.viewDataSouse.orderStatus) {
    //       case "1":
    //         isshow = this.power.indexOf("event:alarm:judge") != -1;
    //         break;
    //       case "2":
    //         isshow = this.power.indexOf("event:alarm:sch") != -1;
    //         break;
    //       case "3":
    //         isshow = this.power.indexOf("event:alarm:claim") != -1;
    //         break;
    //       case "4":
    //         isshow = this.power.indexOf("event:alarm:dis") != -1;
    //         break;
    //       case "5":
    //         isshow = this.power.indexOf("event:alarm:ver") != -1;
    //         break;
    //     }
    //   }
    //   return isshow;
    // },
    updateStatus() {
      switch (this.viewDataSouse.orderStatus) {
        case "0":
          this.btnName = "假警"; //虚假告警完结
          break;
        case "1":
          this.btnName = "研判";
          break;
        case "2":
          this.btnName = "调度";
          break;
        case "3":
          this.btnName = "待认领"; //"待处置-部门";
          break;
        case "4":
          this.btnName = "处置";
          break;
        case "5":
          this.btnName = "核实";
          break;
        case "6":
          this.btnName = "工单完成";
          break;
        case "7":
          this.btnName = "重复告警"; //重复告警完成
          break;
      }
      this.autoHeight();
    },

    eventName(val) {
      if (val != "") {
        return "/ " + val;
      }
    },
    timeStr(str) {
      return DateFormat.utcTimeToStrTime(str + "");
    },
    // queryInfo() {
    //   if (this.viewDataSouse.ifEdit == "1") {
    //     if (this.viewDataSouse.orderStatus == "3") {
    //       // $v.message({
    //       //   message: '请到“铁塔视联平台app”认领处理单！'
    //       // });
    //       // return;
    //       this.open();
    //     } else if (this.viewDataSouse.orderStatus === "1") {
    //       // $v.jumpMenuKeep(
    //       //   this,
    //       //   "/eventJudge?orderId=" +
    //       //     this.viewDataSouse.orderId +
    //       //     "&orderStatus=" +
    //       //     this.viewDataSouse.orderStatus,
    //       //   true
    //       // );
    //       this.$router.push({
    //         path:
    //           "/eventJudge?orderId=" +
    //           this.viewDataSouse.orderId +
    //           "&orderStatus=" +
    //           this.viewDataSouse.orderStatus,
    //       });
    //     } else if (this.viewDataSouse.orderStatus === "4") {
    //       // $v.jumpMenuKeep(
    //       //   this,
    //       //   "/eventDeal?orderId=" +
    //       //     this.viewDataSouse.orderId +
    //       //     "&orderStatus=" +
    //       //     this.viewDataSouse.orderStatus,
    //       //   true
    //       // );
    //       this.$router.push({
    //         path:
    //           "/eventDeal?orderId=" +
    //           this.viewDataSouse.orderId +
    //           "&orderStatus=" +
    //           this.viewDataSouse.orderStatus,
    //       });
    //     } else if (this.viewDataSouse.orderStatus === "5") {
    //       // $v.jumpMenuKeep(
    //       //   this,
    //       //   "/eventCheck?orderId=" +
    //       //     this.viewDataSouse.orderId +
    //       //     "&orderStatus=" +
    //       //     this.viewDataSouse.orderStatus,
    //       //   true
    //       // );
    //       this.$router.push({
    //         path:
    //           "/eventCheck?orderId=" +
    //           this.viewDataSouse.orderId +
    //           "&orderStatus=" +
    //           this.viewDataSouse.orderStatus,
    //       });
    //     } else if (this.viewDataSouse.orderStatus === "2") {
    //       // $v.jumpMenuKeep(
    //       //   this,
    //       //   "/eventDispatch?orderId=" +
    //       //     this.viewDataSouse.orderId +
    //       //     "&orderStatus=" +
    //       //     this.viewDataSouse.orderStatus,
    //       //   true
    //       // );
    //       this.$router.push({
    //         path:
    //           "/eventDispatch?orderId=" +
    //           this.viewDataSouse.orderId +
    //           "&orderStatus=" +
    //           this.viewDataSouse.orderStatus,
    //       });
    //     }
    //   }
    // },
    clickView() {
      // $v.jumpMenuKeep(
      //   this,
      //   "/eventDetails?orderId=" +
      //     this.viewDataSouse.orderId +
      //     "&type=4" +
      //     "&orderStatus=" +
      //     this.viewDataSouse.orderStatus,
      //   true
      // );
      this.$router.push({
        path:
          "/eventDetails?orderId=" +
          this.viewDataSouse.orderId +
          "&type=4" +
          "&orderStatus=" +
          this.viewDataSouse.orderStatus +
          "&list=" +
          JSON.stringify(this.listData),
      });
    },
  },
  props: {
    btnType: {
      default: "1",
    },
    viewDataSouse: {
      type: Object,
      default: function () {
        return {
          alarmBody: "非法闯入",
          gridName: "",
          warningTypeName: "",
          orderId: "27175013912150071",
          latitude: "346.1232",
          warningOrderId: "27175013912150067",
          orderStatus: "2",
          description: "",
          remark: "",
          keeperId: "",
          video: {
            fileCode: "111111",
            fileName: "vediotest",
            startTime: "2021-05-18 09:14:55",
            endTime: "2021-05-18 09:14:57",
            recordType: 1,
            fileImageUrl: "http://dwdwdwdwd",
            warningOrderId: "27175013912150067",
          },
          findMobile: "",
          warningSource: "1",
          duration: "266天22小时59分钟",
          orderStatusName: "派单中",
          cityName: "",
          emergencyLevel: "",
          tenantName: "",
          keeperName: "",
          emergencyLevelName: "",
          countyName: "",
          longitude: "234.12",
          createDate: "2021-05-11T10:47:55.000+0000",
          imgs: [
            {
              fileCode: "111",
              fileName: "test",
              fileUrl: "http://dwadwadadawdawdawd",
              warningOrderId: "27175013912150067",
            },
          ],
          address: "",
          findName: "",
          expectTime: "",
          reciveTime: "",
          ifEdit: true,
          alarmTime: "2020-08-27T18:32:52.000+0000",
          warningTypeId: "1001",
          tenantId: "252D35113E5B4F5A8D063957567E9194",
          gridId: "",
          provinceName: "",
        };
      },
    },
    listData: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
html {
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
}

.view {
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px !important;
  border: 2px solid #efe6e6;
  // box-shadow: 0 10px 12px 3px rgba(213, 210, 233, 0.55) !important;
  padding: 24px 24px 16px !important;
  cursor: pointer !important;
}

.one-title {
  height: 24px;
  font-size: 18px;
  line-height: 24px;
  color: #333333;
  text-align: center;
}

.one-state {
  width: 100%;
  height: 20px;
  font-weight: 400;
  color: #ffffff;
  line-height: 19px;
  text-align: center;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 6px 1px rgba(213, 210, 233, 0.55);
  border-radius: 4px;
  background: #f5a623;
}

.one-chao {
  text-align: center;
  width: 24px;
  height: 24px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  text-shadow: 0 4px 6px #d5d2e9;
  background: #ff6a6c;
}

.one-pi {
  width: 24px;
  height: 24px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  text-shadow: 0 4px 6px #d5d2e9;
  background: #d8a7dd;
}

.line1 {
  height: 1px;
  border: 1px dashed #b4bdc5;
}

.line2 {
  height: 1px;
  border: 1px dashed #b4bdc5;
}

.row {
  margin-bottom: 0.3rem;
}

.btnStyle {
  color: #ffffff;
  width: 100%;
  background: #ff6a6c;
  border-radius: 12px;
  cursor: pointer;
  font-size: 10px;
}

.viewTitleStyle {
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  color: #98a0a7;
  display: flex;
  flex-wrap: nowrap;
  line-height: 22px;
  height: 22px;
}
.viewTitleStyle .status {
  display: inline-block;
  border-radius: 2px;
  padding: 2px 6px;
  margin-left: 5px;
  text-align: center;
  vertical-align: middle;
  line-height: 18px;
}
.viewTitleStyle .tag1 {
  background: #00a8ff;
  color: #fff;
}

.viewTitleStyle .tag2 {
  background: #e3bd11;
  color: #fff;
}

.viewTitleStyle .tag3 {
  background: rgba(248, 120, 50, 1);
  color: #fff;
}

.viewTitleStyle .tag4 {
  background: rgba(251, 46, 60, 1);
  color: #fff;
}
.viewTitleStyle .iconfont {
  font-size: 14px !important;
  line-height: 22px;
  display: inline-block;
}

.viewTitleStyle .value {
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  //width: 100%;
  font-weight: 400;
  color: #666666;
  display: inline-block;
  margin-left: 5px;
}

.clickStyle {
  cursor: pointer;
  color: #0d8bff;
}

.leftpic {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.view-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  .collect-btn {
    width: 66px;
    height: 24px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    > i {
      font-size: 24px;
      margin-right: 6px;
    }
  }
  .view-footer-right {
    display: flex;
    justify-content: end;
    .timeout-desc {
      text-align: end;
      height: 28px;
      line-height: 28px;
      padding: 0 0 5px;
    }
  }
}

.buttons {
  display: flex;
  justify-content: center;
  font-size: 10px !important;
}

.buttonClass {
  min-width: 76px;
  height: 28px;
  line-height: 28px;
  /*height: 4.5vh;*/
  background: #ff6a6c;
  border-radius: 12px;
  border: 1px solid #ff6a6c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-right: 0px;
  font-size: 14px !important;
}
.c-home .buttons .buttonClass.el-button-Query {
  margin: 0 !important;
  padding: 0 !important;
}

.el-button {
  padding: 0 0 !important;
  font-size: 10px !important;
}

span,
div {
  /*font-family: PingFangSC-Regular, PingFang SC !important;*/
}

.spanStyle {
  white-space: nowrap; /*强制span不换行*/
  display: inline-block; /*将span当做块级元素对待*/
  width: 100%; /*限制宽度*/
  overflow: hidden; /*超出宽度部分隐藏*/
  text-overflow: ellipsis; /*超出部分以点号代替*/
}

.stateType {
  padding: 2px 1px 2px 5px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 20px;
  background: rgba(65, 117, 5, 0.58);
  border-radius: 0px 3px 3px 0px;
  position: absolute;
  bottom: 10px;
  left: 0px;
}
.el-button:focus,
.el-button:hover {
  color: #ffffff;
  border-color: #ff6a6c;
  background-color: #ff6a6c;
  -webkit-box-shadow: 0 5px 5px 1px rgba(255, 106, 108, 0.25) !important;
  box-shadow: 0 5px 5px 1px rgba(255, 106, 108, 0.25) !important;
}
</style>
